<template>
  <layout title="countDown倒计时">
    <layout-content title="基础使用">
      <tn-count-down :time="countDownTime"></tn-count-down>
      <view class="tn-margin-top-sm">
        <tn-count-down :time="countDownTime" separator-type="cn"></tn-count-down>
      </view>
      <view class="tn-margin-top-sm">
        <tn-count-down :time="countDownTime" border></tn-count-down>
      </view>
    </layout-content>

    <layout-content title="手动控制">
      <view class="tn-col-12 tn-flex-column">
        <view class="tn-col-12 tn-flex-center">
          <tn-count-down ref="countDownRef" :time="countDownTime" :autoplay="false"></tn-count-down>
        </view>
        <view class="tn-col-12 tn-flex-center tn-margin-top-sm">
          <view><tn-button @click="startCountDown">开始计时</tn-button></view>
          <view class="tn-margin-left"><tn-button type="danger" @click="stopCountDown">停止计时</tn-button></view>
        </view>
      </view>
    </layout-content>

    <layout-content title="设置尺寸">
      <tn-count-down :time="countDownTime" font-size="36"></tn-count-down>
    </layout-content>

    <layout-content title="设置颜色">
      <tn-count-down :time="countDownTime" border bg-color="tn-bg-gray--light" color="tn-color-grey" border-color="tn-border-gray"></tn-count-down>
    </layout-content>

    <layout-content title="自定义配置">
      <text>隐藏天: </text><tn-count-down :time="countDownTime" separator-type="cn" :option="hiddenDayOption"></tn-count-down>
      <view class="tn-margin-top-sm">
        <text>隐藏小时: </text><tn-count-down :time="countDownTime" separator-type="cn" :option="hiddenHourOption"></tn-count-down>
      </view>
      <view class="tn-margin-top-sm">
        <text>隐藏秒: </text><tn-count-down :time="countDownTime" separator-type="cn" :option="hiddenSecondOption"></tn-count-down>
      </view>
    </layout-content>
  </layout>

  <layout-doc v-model="showDoc" :content="docContent"></layout-doc>
  <doc-fab @click="handleDocFabClick"/>
</template>

<script lang="ts" setup>
import { CSSProperties, ref } from 'vue'
import { docContent } from './lib/doc'
import Layout from '@/components/layout/index.vue'
import LayoutContent from '@/components/layout/content.vue'
import LayoutDoc from '@/components/layout/doc.vue'
import DocFab from '@/components/doc-fab/index.vue'

import TnCountDown from '@/tuniao-ui/components/tn-count-down/src/CountDown.vue'
import { CountDownOption } from '@/tuniao-ui/types'
import TnButton from '@/tuniao-ui/components/tn-button/src/Button.vue'

// 弹出文档 
let showDoc = ref<boolean>(false)
const handleDocFabClick = () => {
  showDoc.value = true
}

// 倒计时时间
const countDownTime: number = 386400

// 手动控制
const countDownRef = ref<InstanceType<typeof TnCountDown>>()
const startCountDown = () => {
  countDownRef.value?.start()
}
const stopCountDown = () => {
  countDownRef.value?.stop()
}

// 自定义配置
const hiddenDayOption: CountDownOption = {
  day: false
}
const hiddenHourOption: CountDownOption = {
  hour: false
}
const hiddenSecondOption: CountDownOption = {
  second: false
}
</script>

<style lang="scss" scoped>
</style>
